<template>
  <el-form-item :label="type" :prop="prop">
    <el-date-picker
      type="date"
      :placeholder="`请选择${type}`"
      start-placeholder
      v-model="date"
      :disabled="disabled"
      @change="changeTime"
    ></el-date-picker>
  </el-form-item>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'DatePicker',
  props: {
    type: String,
    prop: String,
    disabled: Boolean,
    dateTime: Date,
  },
  setup(props, context) {
    const date = ref(props.dateTime);
    const changeTime = () => {
      context.emit('update:dateTime', date.value);
      context.emit('changeTime', date.value);
    };
    return {
      changeTime,
      date,
    };
  },
});
</script>

<style lang="scss">
@import '@/assets/css/config.scss';
.el-date-picker {
  // background-color: #333;
  .el-date-picker__header {
    &-label {
      color: $themeColor;
      font-weight: 1000;
      &:hover {
        color: $themeLight;
      }
    }
  }
}
.el-picker-panel__icon-btn {
  font-weight: 700;
  &:hover {
    color: $themeLight;
  }
}
.el-date-table {
  td {
    &.today span {
      color: $themeColor;
      font-weight: 700;
    }
    &.available:hover {
      color: $themeLight;
      font-weight: 600;
    }
    &.current:not(.disabled) span {
      background-color: $themeColor;
    }
  }
}
.el-month-table,
.el-year-table {
  td .cell:hover {
    color: $themeLight;
    font-weight: 600;
  }
  td.current:not(.disabled) .cell,
  td.today .cell {
    color: $themeColor;
  }
}
</style>
